<template>
  <div>
    <router-view />
    
    <el-footer>
    <div class="tabbar" router>
      <el-menu :default-active="acName">
        <router-link to="/" tag="div">
          <el-menu-item index="1">
            <i class="el-icon-s-home ico"></i>
            <div slot="title">首页</div>
          </el-menu-item>
        </router-link>
        <router-link to="/tabbar/classify" tag="div">
          <el-menu-item index="2">
            <i class="el-icon-menu ico"></i>
            <div slot="title">分类</div>
          </el-menu-item>
        </router-link>
        <router-link to="/tabbar/car" tag="div">
          <el-menu-item index="3">
            <i class="el-icon-shopping-cart-2 ico"></i>
            <div slot="title">购物车</div>
          </el-menu-item>
        </router-link>
        <router-link to="/tabbar/mine" tag="div">
          <el-menu-item index="4">
            <i class="el-icon-user ico"></i>
            <div slot="title">我的</div>
          </el-menu-item>
        </router-link>
      </el-menu>
    </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      acName:"aaa",
      navconfig:{
        "/":"1",
        "classify":"2",
        "car":"3",
        "mine":"4"
      }
    };
  },

    mounted() {
      var href=window.location.href
        href=  href.split("/tabbar/")[1]
      this.acName=this.navconfig[href]
    },
};
</script>

<style>
.tabbar {
  width: 320ox;
  /* height: 41.81px; */
  background: rgb(255, 255, 255);
  position: fixed;
  left: 0;
  bottom: -15px;
}
.img img {
  width: 18px;
  height: 18px;
}
.name {
  font-size: 12px;
}
.el-menu {
  display: flex;
}
.el-menu-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  /* line-height: 0 */
}
.el-menu-item div {
  position: absolute;
  top: 5px;
}
.ico {
  height: 20px;
  margin-left: 5px;
  font-size: 21px;
}
</style>
